<template>
  <div class="login-form-box">
    <el-form ref="registerFormRef" label-position="top" size="large" :model="registerForm" :rules="registerRules">
      <el-form-item label="组织名称" prop="orgName">
        <el-input clearable v-model="registerForm.orgName" size="large" />
      </el-form-item>
      <el-form-item label="用户名" prop="nickname">
        <el-input clearable v-model="registerForm.nickname" size="large" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input clearable v-model="registerForm.phone" size="large" />
      </el-form-item>
      <el-form-item label="登录账号" prop="username">
        <el-input clearable v-model="registerForm.username" size="large" />
      </el-form-item>
      <el-form-item label="登录密码" prop="password"  v-if="loginTab === 'password'">
        <el-input clearable v-model="registerForm.password" :type="isHide ? 'password' :'text'">
          <template #suffix>
            <el-icon @click="isHide = !isHide">
              <View v-if="isHide"/>
              <Hide v-else/>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码"  prop="code" v-if="loginTab === 'code'">
        <el-input v-model="registerForm.code" :class="['code-input',codeMap.count ? 'disabled' : '']">
          <template #append>
            <el-button class="green-button" type="primary" @click="handleGetCode('register')">
              {{ codeButtonText }}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login-button green-button" size="large" style="width: 100%" type="primary" @click="login">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();
import {View,Hide } from '@element-plus/icons-vue'
import userLoginForm from './userLoginForm'
const {
  loginTab,
  changeLoginType,
  codeMap,
  codeButtonText,
  handleGetCode,
} = userLoginForm()

/**
 * 登录相关
 * @type {Ref<UnwrapRef<{password: [{trigger: string, message: string, required: boolean}], code: [{trigger: string, message: string, required: boolean}], username: [{trigger: string, message: string, required: boolean}]}>>}
 */
const registerRules = ref({
  orgName: [{ required: true, message: '请输入组织名称', trigger: 'blur' }],
  nickname: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入登录密码', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
})
const registerForm = ref({
  orgName: '',
  nickname: '',
  phone: '',
  username: '',
  password: '',
  code: ''
})
const isHide = ref(true)
const registerFormRef = ref(null)
function login() {
  registerFormRef.value.validate(async (valid) => {
    if (valid) {
      await store.dispatch('register', registerForm.value)
      await router.replace('/')
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>
<style lang="scss">
.login-form-box {
  padding: 40px 28px 0;
}
.change-button {
  height: 48px;
  background: rgba(23, 189, 178, .1);
  border-radius: 0px 0px 20px 20px;
  line-height: 58px;
  color: #17BDB2;
  font-size: 16px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
}
.login-tips {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  font-size: 18px;
  color: #676767;
  font-family: Source Han Sans CN;
  .light {
    color: #17BDB2;
  }
}
.login-info {
  width: 100%;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #CACACA;
  font-family: Source Han Sans CN;
  .light {
    color: #666666;
    cursor: pointer;
  }
  .el-checkbox {
    margin-right: 5px;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #17BDB2;
    background-color: #17BDB2;
  }
}
</style>